<template>
  <div class="system-settings">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img class="h-8 w-auto" src="/logo.png" alt="学生健康上报系统" />
              <span class="ml-2 text-xl font-bold text-gray-800">学生健康上报系统</span>
            </div>
          </div>
          <div class="flex items-center">
            <div class="ml-3 relative">
              <div class="flex items-center space-x-4">
                <Bell class="h-5 w-5 text-gray-500" />
                <div class="flex items-center">
                  <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="" />
                  <span class="ml-2 text-sm font-medium text-gray-700">王校长</span>
                  <ChevronDown class="ml-1 h-4 w-4 text-gray-500" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="flex">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-gray-800 min-h-screen">
        <nav class="mt-5 px-2">
          <div class="space-y-1">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <LayoutDashboard class="mr-3 h-5 w-5" />
              数据看板
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Users class="mr-3 h-5 w-5" />
              学院管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <ClipboardList class="mr-3 h-5 w-5" />
              上报记录
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <AlertTriangle class="mr-3 h-5 w-5" />
              异常管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <FileText class="mr-3 h-5 w-5" />
              统计报表
            </a>
            <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Settings class="mr-3 h-5 w-5" />
              系统设置
            </a>
          </div>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 bg-gray-100 p-6">
        <div class="max-w-7xl mx-auto">
          <!-- 页面标题 -->
          <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">系统设置</h1>
            <p class="mt-1 text-sm text-gray-500">配置系统参数、通知设置和用户权限</p>
          </div>

          <!-- 设置选项卡 -->
          <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
            <div class="border-b border-gray-200">
              <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                <button 
                  @click="activeTab = 'basic'"
                  :class="{
                    'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm': true,
                    'border-blue-500 text-blue-600': activeTab === 'basic',
                    'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'basic'
                  }"
                >
                  基本设置
                </button>
                <button 
                  @click="activeTab = 'notification'"
                  :class="{
                    'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm': true,
                    'border-blue-500 text-blue-600': activeTab === 'notification',
                    'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'notification'
                  }"
                >
                  通知设置
                </button>
                <button 
                  @click="activeTab = 'permission'"
                  :class="{
                    'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm': true,
                    'border-blue-500 text-blue-600': activeTab === 'permission',
                    'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'permission'
                  }"
                >
                  权限设置
                </button>
                <button 
                  @click="activeTab = 'backup'"
                  :class="{
                    'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm': true,
                    'border-blue-500 text-blue-600': activeTab === 'backup',
                    'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'backup'
                  }"
                >
                  备份与恢复
                </button>
                <button 
                  @click="activeTab = 'log'"
                  :class="{
                    'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm': true,
                    'border-blue-500 text-blue-600': activeTab === 'log',
                    'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'log'
                  }"
                >
                  系统日志
                </button>
              </nav>
            </div>

            <!-- 基本设置 -->
            <div v-if="activeTab === 'basic'" class="p-6">
              <div class="space-y-6">
                <!-- 学校信息 -->
                <div>
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">学校信息</h3>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">学校名称</label>
                      <input 
                        type="text" 
                        v-model="basicSettings.schoolName"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">学校代码</label>
                      <input 
                        type="text" 
                        v-model="basicSettings.schoolCode"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">学校地址</label>
                      <input 
                        type="text" 
                        v-model="basicSettings.schoolAddress"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                      <input 
                        type="text" 
                        v-model="basicSettings.schoolPhone"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div class="md:col-span-2">
                      <label class="block text-sm font-medium text-gray-700 mb-1">学校Logo</label>
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden">
                          <img v-if="basicSettings.logoUrl" :src="basicSettings.logoUrl" class="h-full w-full object-cover" />
                          <div v-else class="h-full w-full flex items-center justify-center text-gray-400">
                            <ImageIcon class="h-8 w-8" />
                          </div>
                        </div>
                        <button class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                          更改
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 系统参数 -->
                <div class="pt-6 border-t border-gray-200">
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">系统参数</h3>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">系统名称</label>
                      <input 
                        type="text" 
                        v-model="basicSettings.systemName"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">系统版本</label>
                      <input 
                        type="text" 
                        v-model="basicSettings.systemVersion"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        disabled
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">默认上报时间</label>
                      <div class="grid grid-cols-2 gap-4">
                        <input 
                          type="time" 
                          v-model="basicSettings.reportStartTime"
                          class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                        <input 
                          type="time" 
                          v-model="basicSettings.reportEndTime"
                          class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                      </div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">体温异常阈值 (°C)</label>
                      <input 
                        type="number" 
                        v-model="basicSettings.temperatureThreshold"
                        step="0.1"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">数据保留天数</label>
                      <input 
                        type="number" 
                        v-model="basicSettings.dataRetentionDays"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">系统主题</label>
                      <select 
                        v-model="basicSettings.theme"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="light">浅色主题</option>
                        <option value="dark">深色主题</option>
                        <option value="auto">跟随系统</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="flex justify-end pt-6">
                  <button 
                    @click="saveBasicSettings"
                    class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                  >
                    保存设置
                  </button>
                </div>
              </div>
            </div>

            <!-- 通知设置 -->
            <div v-if="activeTab === 'notification'" class="p-6">
              <div class="space-y-6">
                <!-- 提醒规则 -->
                <div>
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">提醒规则</h3>
                  <div class="space-y-4">
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="remind-not-reported" 
                        v-model="notificationSettings.remindNotReported"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="remind-not-reported" class="ml-2 block text-sm text-gray-900">
                        未上报提醒
                      </label>
                      <div class="ml-4" v-if="notificationSettings.remindNotReported">
                        <select 
                          v-model="notificationSettings.remindNotReportedTime"
                          class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                          <option value="1">上报结束后1小时</option>
                          <option value="2">上报结束后2小时</option>
                          <option value="3">上报结束后3小时</option>
                          <option value="custom">自定义</option>
                        </select>
                      </div>
                    </div>
                    
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="remind-abnormal" 
                        v-model="notificationSettings.remindAbnormal"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="remind-abnormal" class="ml-2 block text-sm text-gray-900">
                        异常情况提醒
                      </label>
                      <div class="ml-4" v-if="notificationSettings.remindAbnormal">
                        <select 
                          v-model="notificationSettings.remindAbnormalLevel"
                          class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                          <option value="all">所有异常</option>
                          <option value="temperature">仅体温异常</option>
                          <option value="symptoms">仅症状异常</option>
                          <option value="severe">严重异常</option>
                        </select>
                      </div>
                    </div>
                    
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="remind-daily-summary" 
                        v-model="notificationSettings.remindDailySummary"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="remind-daily-summary" class="ml-2 block text-sm text-gray-900">
                        每日汇总提醒
                      </label>
                      <div class="ml-4" v-if="notificationSettings.remindDailySummary">
                        <input 
                          type="time" 
                          v-model="notificationSettings.remindDailySummaryTime"
                          class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                      </div>
                    </div>
                    
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="remind-weekly-summary" 
                        v-model="notificationSettings.remindWeeklySummary"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="remind-weekly-summary" class="ml-2 block text-sm text-gray-900">
                        每周汇总提醒
                      </label>
                      <div class="ml-4" v-if="notificationSettings.remindWeeklySummary">
                        <select 
                          v-model="notificationSettings.remindWeeklySummaryDay"
                          class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent mr-2"
                        >
                          <option value="1">周一</option>
                          <option value="2">周二</option>
                          <option value="3">周三</option>
                          <option value="4">周四</option>
                          <option value="5">周五</option>
                          <option value="6">周六</option>
                          <option value="0">周日</option>
                        </select>
                        <input 
                          type="time" 
                          v-model="notificationSettings.remindWeeklySummaryTime"
                          class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 消息模板 -->
                <div class="pt-6 border-t border-gray-200">
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">消息模板</h3>
                  <div class="space-y-4">
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">未上报提醒模板</label>
                      <textarea 
                        v-model="notificationSettings.notReportedTemplate"
                        rows="3"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入未上报提醒的消息模板..."
                      ></textarea>
                      <p class="mt-1 text-xs text-gray-500">可用变量: {姓名}, {学号}, {班级}, {上报日期}, {上报时间}</p>
                    </div>
                    
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">异常情况提醒模板</label>
                      <textarea 
                        v-model="notificationSettings.abnormalTemplate"
                        rows="3"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入异常情况提醒的消息模板..."
                      ></textarea>
                      <p class="mt-1 text-xs text-gray-500">可用变量: {姓名}, {学号}, {班级}, {异常类型}, {异常详情}, {上报时间}</p>
                    </div>
                    
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">每日汇总提醒模板</label>
                      <textarea 
                        v-model="notificationSettings.dailySummaryTemplate"
                        rows="3"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入每日汇总提醒的消息模板..."
                      ></textarea>
                      <p class="mt-1 text-xs text-gray-500">可用变量: {日期}, {应上报人数}, {实际上报人数}, {上报率}, {异常人数}, {异常率}</p>
                    </div>
                  </div>
                </div>

                <!-- 通知渠道 -->
                <div class="pt-6 border-t border-gray-200">
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">通知渠道</h3>
                  <div class="space-y-4">
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="channel-wechat" 
                        v-model="notificationSettings.channelWechat"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="channel-wechat" class="ml-2 block text-sm text-gray-900">
                        微信公众号
                      </label>
                    </div>
                    
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="channel-sms" 
                        v-model="notificationSettings.channelSms"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="channel-sms" class="ml-2 block text-sm text-gray-900">
                        短信通知
                      </label>
                    </div>
                    
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="channel-email" 
                        v-model="notificationSettings.channelEmail"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="channel-email" class="ml-2 block text-sm text-gray-900">
                        邮件通知
                      </label>
                    </div>
                    
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="channel-app" 
                        v-model="notificationSettings.channelApp"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      >
                      <label for="channel-app" class="ml-2 block text-sm text-gray-900">
                        APP推送
                      </label>
                    </div>
                  </div>
                </div>

                <div class="flex justify-end pt-6">
                  <button 
                    @click="saveNotificationSettings"
                    class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                  >
                    保存设置
                  </button>
                </div>
              </div>
            </div>

            <!-- 权限设置 -->
            <div v-if="activeTab === 'permission'" class="p-6">
              <div class="space-y-6">
                <!-- 角色管理 -->
                <div>
                  <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900">角色管理</h3>
                    <button 
                      @click="showAddRoleDialog = true"
                      class="px-3 py-1 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors flex items-center"
                    >
                      <PlusCircle class="w-4 h-4 mr-1" />
                      添加角色
                    </button>
                  </div>
                  
                  <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                      <thead class="bg-gray-50">
                        <tr>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色名称</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色描述</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户数量</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="(role, index) in roles" :key="index">
                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ role.name }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ role.description }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ role.userCount }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ role.createdAt }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button 
                              @click="editRole(role)"
                              class="text-blue-600 hover:text-blue-900 mr-3"
                            >
                              编辑
                            </button>
                            <button 
                              v-if="role.name !== '超级管理员'"
                              @click="deleteRole(role)"
                              class="text-red-600 hover:text-red-900"
                            >
                              删除
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <!-- 用户管理 -->
                <div class="pt-6 border-t border-gray-200">
                  <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900">用户管理</h3>
                    <button 
                      @click="showAddUserDialog = true"
                      class="px-3 py-1 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors flex items-center"
                    >
                      <PlusCircle class="w-4 h-4 mr-1" />
                      添加用户
                    </button>
                  </div>
                  
                  <!-- 搜索和筛选 -->
                  <div class="mb-4 flex space-x-4">
                    <div class="flex-1">
                      <div class="relative">
                        <input 
                          type="text" 
                          v-model="userFilters.keyword"
                          placeholder="搜索用户名/姓名/手机号" 
                          class="pl-8 pr-4 py-2 w-full border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                        <Search class="w-4 h-4 text-gray-400 absolute left-2.5 top-2.5" />
                      </div>
                    </div>
                    <div class="w-48">
                      <select 
                        v-model="userFilters.role"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="">全部角色</option>
                        <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.name }}</option>
                      </select>
                    </div>
                    <div class="w-48">
                      <select 
                        v-model="userFilters.status"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="">全部状态</option>
                        <option value="active">正常</option>
                        <option value="locked">已锁定</option>
                        <option value="inactive">未激活</option>
                      </select>
                    </div>
                  </div>
                  
                  <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                      <thead class="bg-gray-50">
                        <tr>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">手机号</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后登录</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="(user, index) in filteredUsers" :key="index">
                          <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                              <div class="flex-shrink-0 h-10 w-10">
                                <img class="h-10 w-10 rounded-full" :src="user.avatar" alt="" />
                              </div>
                              <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">{{ user.username }}</div>
                                <div class="text-sm text-gray-500">{{ user.email }}</div>
                              </div>
                            </div>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ user.name }}</td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">
                              {{ user.role }}
                            </span>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ user.phone }}</td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <span 
                              :class="{
                                'px-2 py-1 text-xs rounded-full': true,
                                'bg-green-100 text-green-800': user.status === 'active',
                                'bg-red-100 text-red-800': user.status === 'locked',
                                'bg-yellow-100 text-yellow-800': user.status === 'inactive'
                              }"
                            >
                              {{ userStatusText[user.status] }}
                            </span>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ user.lastLogin }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button 
                              @click="editUser(user)"
                              class="text-blue-600 hover:text-blue-900 mr-2"
                            >
                              编辑
                            </button>
                            <button 
                              v-if="user.status === 'active'"
                              @click="lockUser(user)"
                              class="text-yellow-600 hover:text-yellow-900 mr-2"
                            >
                              锁定
                            </button>
                            <button 
                              v-if="user.status === 'locked'"
                              @click="unlockUser(user)"
                              class="text-green-600 hover:text-green-900 mr-2"
                            >
                              解锁
                            </button>
                            <button 
                              @click="resetPassword(user)"
                              class="text-indigo-600 hover:text-indigo-900"
                            >
                              重置密码
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  
                  <!-- 分页 -->
                  <div class="flex items-center justify-between mt-4">
                    <div class="flex-1 flex justify-between sm:hidden">
                      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        上一页
                      </a>
                      <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        下一页
                      </a>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                      <div>
                        <p class="text-sm text-gray-700">
                          显示第 <span class="font-medium">1</span> 至 <span class="font-medium">10</span> 条，共 <span class="font-medium">{{ totalUsers }}</span> 条
                        </p>
                      </div>
                      <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <ChevronLeft class="h-5 w-5" />
                          </a>
                          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            1
                          </a>
                          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600 hover:bg-blue-100">
                            2
                          </a>
                          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            3
                          </a>
                          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <ChevronRight class="h-5 w-5" />
                          </a>
                        </nav>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 备份与恢复 -->
            <div v-if="activeTab === 'backup'" class="p-6">
              <div class="space-y-6">
                <!-- 数据备份 -->
                <div>
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">数据备份</h3>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="flex justify-between items-center mb-4">
                      <div>
                        <h4 class="text-base font-medium text-gray-900">手动备份</h4>
                        <p class="text-sm text-gray-500 mt-1">创建系统数据的完整备份</p>
                      </div>
                      <button 
                        @click="createBackup"
                        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center"
                      >
                        <Save class="w-4 h-4 mr-1" />
                        创建备份
                      </button>
                    </div>
                    
                    <div class="mb-4">
                      <h4 class="text-base font-medium text-gray-900 mb-2">自动备份设置</h4>
                      <div class="flex items-center">
                        <input 
                          type="checkbox" 
                          id="auto-backup" 
                          v-model="backupSettings.autoBackup"
                          class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                        >
                        <label for="auto-backup" class="ml-2 block text-sm text-gray-900">
                          启用自动备份
                        </label>
                      </div>
                      
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3" v-if="backupSettings.autoBackup">
                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">备份频率</label>
                          <select 
                            v-model="backupSettings.backupFrequency"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          >
                            <option value="daily">每天</option>
                            <option value="weekly">每周</option>
                            <option value="monthly">每月</option>
                          </select>
                        </div>
                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">备份时间</label>
                          <input 
                            type="time" 
                            v-model="backupSettings.backupTime"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          >
                        </div>
                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">保留备份数量</label>
                          <input 
                            type="number" 
                            v-model="backupSettings.keepBackups"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          >
                        </div>
                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">备份存储位置</label>
                          <select 
                            v-model="backupSettings.backupStorage"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          >
                            <option value="local">本地存储</option>
                            <option value="cloud">云存储</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 备份历史 -->
                <div class="pt-6">
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">备份历史</h3>
                  <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                      <thead class="bg-gray-50">
                        <tr>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份名称</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份时间</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份大小</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份类型</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                      </thead>
                      <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="(backup, index) in backups" :key="index">
                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ backup.name }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ backup.time }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ backup.size }}</td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ backup.type }}</td>
                          <td class="px-6 py-4 whitespace-nowrap">
                            <span 
                              :class="{
                                'px-2 py-1 text-xs rounded-full': true,
                                'bg-green-100 text-green-800': backup.status === 'success',
                                'bg-red-100 text-red-800': backup.status === 'failed',
                                'bg-yellow-100 text-yellow-800': backup.status === 'in_progress'
                              }"
                            >
                              {{ backupStatusText[backup.status] }}
                            </span>
                          </td>
                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button 
                              @click="restoreBackup(backup)"
                              class="text-blue-600 hover:text-blue-900 mr-3"
                            >
                              恢复
                            </button>
                            <button 
                              @click="downloadBackup(backup)"
                              class="text-green-600 hover:text-green-900 mr-3"
                            >
                              下载
                            </button>
                            <button 
                              @click="deleteBackup(backup)"
                              class="text-red-600 hover:text-red-900"
                            >
                              删除
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <!-- 数据恢复 -->
                <div class="pt-6 border-t border-gray-200">
                  <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">数据恢复</h3>
                  <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="mb-4">
                      <h4 class="text-base font-medium text-gray-900 mb-2">从备份文件恢复</h4>
                      <div class="flex items-center">
                        <input 
                          type="file" 
                          id="backup-file" 
                          class="hidden"
                          ref="backupFileInput"
                          @change="handleBackupFileChange"
                        >
                        <label 
                          for="backup-file" 
                          class="cursor-pointer px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                          @click="$refs.backupFileInput.click()"
                        >
                          选择备份文件
                        </label>
                        <span class="ml-3 text-sm text-gray-500">
                          {{ backupFileName || '未选择文件' }}
                        </span>
                      </div>
                    </div>
                    
                    <div class="flex justify-end">
                      <button 
                        @click="uploadAndRestore"
                        :disabled="!backupFileName"
                        :class="{
                          'px-4 py-2 rounded-lg text-white transition-colors': true,
                          'bg-blue-500 hover:bg-blue-600': backupFileName,
                          'bg-gray-300 cursor-not-allowed': !backupFileName
                        }"
                      >
                        上传并恢复
                      </button>
                    </div>
                  </div>
                </div>

                <div class="flex justify-end pt-6">
                  <button 
                    @click="saveBackupSettings"
                    class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                  >
                    保存设置
                  </button>
                </div>
              </div>
            </div>

            <!-- 系统日志 -->
            <div v-if="activeTab === 'log'" class="p-6">
              <div class="space-y-6">
                <!-- 日志筛选 -->
                <div class="bg-white p-4 rounded-lg shadow-sm">
                  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">日志类型</label>
                      <select 
                        v-model="logFilters.type"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="">全部类型</option>
                        <option value="system">系统日志</option>
                        <option value="login">登录日志</option>
                        <option value="operation">操作日志</option>
                        <option value="error">错误日志</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">日志级别</label>
                      <select 
                        v-model="logFilters.level"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="">全部级别</option>
                        <option value="info">信息</option>
                        <option value="warning">警告</option>
                        <option value="error">错误</option>
                        <option value="critical">严重</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                      <input 
                        type="date" 
                        v-model="logFilters.startDate"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
                      <input 
                        type="date" 
                        v-model="logFilters.endDate"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                    </div>
                  </div>
                  <div class="flex justify-end mt-4">
                    <button 
                      @click="searchLogs"
                      class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors flex items-center"
                    >
                      <Search class="w-4 h-4 mr-1" />
                      搜索
                    </button>
                    <button 
                      @click="resetLogFilters"
                      class="ml-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors"
                    >
                      重置
                    </button>
                    <button 
                      @click="exportLogs"
                      class="ml-2 px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 transition-colors flex items-center"
                    >
                      <Download class="w-4 h-4 mr-1" />
                      导出
                    </button>
                  </div>
                </div>

                <!-- 日志列表 -->
                <div class="overflow-x-auto">
                  <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                      <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">级别</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP地址</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内容</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                      </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                      <tr v-for="(log, index) in logs" :key="index">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.time }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          <span 
                            :class="{
                              'px-2 py-1 text-xs rounded-full': true,
                              'bg-blue-100 text-blue-800': log.type === 'system',
                              'bg-green-100 text-green-800': log.type === 'login',
                              'bg-purple-100 text-purple-800': log.type === 'operation',
                              'bg-red-100 text-red-800': log.type === 'error'
                            }"
                          >
                            {{ logTypeText[log.type] }}
                          </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                          <span 
                            :class="{
                              'px-2 py-1 text-xs rounded-full': true,
                              'bg-gray-100 text-gray-800': log.level === 'info',
                              'bg-yellow-100 text-yellow-800': log.level === 'warning',
                              'bg-red-100 text-red-800': log.level === 'error',
                              'bg-red-200 text-red-900': log.level === 'critical'
                            }"
                          >
                            {{ logLevelText[log.level] }}
                          </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.user }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.ip }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 truncate max-w-xs">{{ log.content }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                          <button 
                            @click="viewLogDetail(log)"
                            class="text-blue-600 hover:text-blue-900"
                          >
                            详情
                          </button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                
                <!-- 分页 -->
                <div class="flex items-center justify-between">
                  <div class="flex-1 flex justify-between sm:hidden">
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                      上一页
                    </a>
                    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                      下一页
                    </a>
                  </div>
                  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                      <p class="text-sm text-gray-700">
                        显示第 <span class="font-medium">1</span> 至 <span class="font-medium">10</span> 条，共 <span class="font-medium">{{ totalLogs }}</span> 条
                      </p>
                    </div>
                    <div>
                      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                          <span class="sr-only">上一页</span>
                          <ChevronLeft class="h-5 w-5" />
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                          1
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600 hover:bg-blue-100">
                          2
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                          3
                        </a>
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                          <span class="sr-only">下一页</span>
                          <ChevronRight class="h-5 w-5" />
                        </a>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 添加角色弹窗 -->
    <div v-if="showAddRoleDialog" class="fixed inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" @click="showAddRoleDialog = false"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                  添加角色
                </h3>
                <div class="mt-4 space-y-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色名称</label>
                    <input 
                      type="text" 
                      v-model="newRole.name"
                      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="请输入角色名称"
                    >
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色描述</label>
                    <textarea 
                      v-model="newRole.description"
                      rows="3"
                      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="请输入角色描述"
                    ></textarea>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">权限设置</label>
                    <div class="space-y-2">
                      <div v-for="(permission, index) in permissions" :key="index" class="flex items-center">
                        <input 
                          type="checkbox" 
                          :id="`permission-${index}`" 
                          v-model="newRole.permissions"
                          :value="permission.id"
                          class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                        >
                        <label :for="`permission-${index}`" class="ml-2 block text-sm text-gray-900">
                          {{ permission.name }}
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button 
              @click="addRole"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              确认添加
            </button>
            <button 
              @click="showAddRoleDialog = false"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { Bell, ChevronDown, LayoutDashboard, Users, ClipboardList, AlertTriangle, FileText, Settings, PlusCircle, Search, Calendar, Download, Upload, Trash2 } from 'lucide-vue-next'

export default {
  components: {
    Bell, ChevronDown, LayoutDashboard, Users, ClipboardList, AlertTriangle, FileText, Settings, PlusCircle, Search, Calendar, Download, Upload, Trash2
  },
  setup() {
    // 基础状态
    const activeTab = ref('basic')
    const showAddRoleDialog = ref(false)
    const showAddUserDialog = ref(false)
    const showLogDetailDialog = ref(false)
    
    // 学校信息
    const schoolInfo = ref({
      name: '北方工业大学',
      code: '10009',
      address: '北京市石景山区晋元庄路5号',
      contactPerson: '张主任',
      contactPhone: '010-88888888',
      email: 'admin@ncut.edu.cn',
      website: 'https://www.ncut.edu.cn',
      logo: '/logo.png'
    })
    
    // 系统参数
    const systemParams = ref({
      reportStartTime: '07:00',
      reportEndTime: '22:00',
      reportReminder: true,
      abnormalThreshold: 37.3,
      dataRetentionDays: 90,
      autoBackup: true,
      backupTime: '03:00',
      backupRetentionCount: 30
    })
    
    // 提醒规则
    const reminderRules = ref([
      { id: 1, type: 'daily', time: '07:00', enabled: true, targets: ['student'] },
      { id: 2, type: 'abnormal', time: 'immediate', enabled: true, targets: ['counselor', 'college'] },
      { id: 3, type: 'missing', time: '22:30', enabled: true, targets: ['counselor'] }
    ])
    
    // 消息模板
    const messageTemplates = ref([
      { id: 1, type: 'daily', title: '每日健康上报提醒', content: '亲爱的同学，请记得完成今日的健康上报，谢谢配合！', enabled: true },
      { id: 2, type: 'abnormal', title: '异常体温提醒', content: '您有学生体温异常，请及时查看并处理！学生：{student_name}，班级：{class_name}，体温：{temperature}', enabled: true },
      { id: 3, type: 'missing', title: '未上报提醒', content: '以下学生今日未完成健康上报，请督促尽快完成：{student_list}', enabled: true }
    ])
    
    // 角色管理
    const roles = ref([
      { id: 1, name: '超级管理员', description: '系统最高权限', userCount: 2, createdAt: '2023-01-01', permissions: ['all'] },
      { id: 2, name: '学校管理员', description: '学校级管理员', userCount: 5, createdAt: '2023-01-05', permissions: ['dashboard', 'college', 'report', 'abnormal', 'statistics'] },
      { id: 3, name: '数据分析员', description: '负责数据分析', userCount: 3, createdAt: '2023-02-15', permissions: ['dashboard', 'statistics'] }
    ])
    
    // 新角色
    const newRole = ref({
      name: '',
      description: '',
      permissions: []
    })
    
    // 权限列表
    const permissionList = [
      { id: 'dashboard', name: '数据看板', description: '查看系统概览数据' },
      { id: 'college', name: '学院管理', description: '管理学院信息' },
      { id: 'report', name: '上报记录', description: '查看和管理上报记录' },
      { id: 'abnormal', name: '异常管理', description: '处理异常情况' },
      { id: 'statistics', name: '统计报表', description: '生成和导出统计报表' },
      { id: 'settings', name: '系统设置', description: '配置系统参数' }
    ]
    
    // 用户管理
    const users = ref([
      { id: 1, username: 'admin', name: '系统管理员', email: 'admin@ncut.edu.cn', roleId: 1, roleName: '超级管理员', phone: '13800138000', status: 'active', lastLogin: '2023-05-20 08:30:25', avatar: 'https://randomuser.me/api/portraits/men/1.jpg' },
      { id: 2, username: 'wangxiaozhang', name: '王校长', email: 'wang@ncut.edu.cn', roleId: 1, roleName: '超级管理员', phone: '13900139000', status: 'active', lastLogin: '2023-05-19 14:22:10', avatar: 'https://randomuser.me/api/portraits/men/2.jpg' },
      { id: 3, username: 'lizhuren', name: '李主任', email: 'li@ncut.edu.cn', roleId: 2, roleName: '学校管理员', phone: '13700137000', status: 'active', lastLogin: '2023-05-18 09:15:42', avatar: 'https://randomuser.me/api/portraits/women/1.jpg' },
      { id: 4, username: 'zhangfenxi', name: '张分析', email: 'zhang@ncut.edu.cn', roleId: 3, roleName: '数据分析员', phone: '13600136000', status: 'locked', lastLogin: '2023-05-10 16:08:33', avatar: 'https://randomuser.me/api/portraits/women/2.jpg' }
    ])
    
    // 用户筛选
    const userFilters = ref({
      keyword: '',
      role: '',
      status: ''
    })
    
    // 新用户
    const newUser = ref({
      username: '',
      name: '',
      email: '',
      password: '',
      confirmPassword: '',
      roleId: '',
      phone: '',
      status: 'active'
    })
    
    // 备份记录
    const backups = ref([
      { id: 1, name: 'backup_20230520_030000.zip', size: '156MB', createdAt: '2023-05-20 03:00:00', type: 'auto', status: 'completed' },
      { id: 2, name: 'backup_20230519_030000.zip', size: '155MB', createdAt: '2023-05-19 03:00:00', type: 'auto', status: 'completed' },
      { id: 3, name: 'backup_20230518_145212.zip', size: '154MB', createdAt: '2023-05-18 14:52:12', type: 'manual', status: 'completed' }
    ])
    
    // 备份文件名
    const backupFileName = ref('')
    
    // 日志筛选
    const logFilters = ref({
      type: '',
      level: '',
      user: '',
      dateRange: []
    })
    
    // 系统日志
    const logs = ref([
      { id: 1, time: '2023-05-20 08:35:12', type: 'system', level: 'info', user: '系统管理员', ip: '192.168.1.100', os: 'Windows 10', browser: 'Chrome 113', method: 'POST', url: '/api/settings/save', content: '更新系统设置成功' },
      { id: 2, time: '2023-05-20 08:30:25', type: 'login', level: 'info', user: '系统管理员', ip: '192.168.1.100', os: 'Windows 10', browser: 'Chrome 113', method: 'POST', url: '/api/auth/login', content: '登录成功' },
      { id: 3, time: '2023-05-19 16:42:18', type: 'system', level: 'warning', user: '王校长', ip: '192.168.1.101', os: 'macOS', browser: 'Safari 16', method: 'DELETE', url: '/api/users/5', content: '删除用户：赵老师' },
      { id: 4, time: '2023-05-19 14:22:10', type: 'login', level: 'info', user: '王校长', ip: '192.168.1.101', os: 'macOS', browser: 'Safari 16', method: 'POST', url: '/api/auth/login', content: '登录成功' },
      { id: 5, time: '2023-05-19 10:15:33', type: 'system', level: 'error', user: '系统', ip: '192.168.1.10', os: 'Linux', browser: '-', method: 'POST', url: '/api/backup/auto', content: '自动备份失败：磁盘空间不足' }
    ])
    
    // 选中的日志
    const selectedLog = ref({})
    
    // 状态文本映射
    const userStatusText = {
      active: '正常',
      locked: '已锁定',
      inactive: '未激活'
    }
    
    const backupStatusText = {
      completed: '已完成',
      failed: '失败',
      in_progress: '进行中'
    }
    
    const logTypeText = {
      system: '系统日志',
      login: '登录日志',
      operation: '操作日志',
      error: '错误日志'
    }
    
    const logLevelText = {
      info: '信息',
      warning: '警告',
      error: '错误',
      critical: '严重'
    }
    
    // 计算属性
    const filteredUsers = computed(() => {
      return users.value.filter(user => {
        // 关键词筛选
        if (userFilters.value.keyword && !(
          user.username.includes(userFilters.value.keyword) ||
          user.name.includes(userFilters.value.keyword) ||
          user.phone.includes(userFilters.value.keyword)
        )) {
          return false
        }
        
        // 角色筛选
        if (userFilters.value.role && user.roleId.toString() !== userFilters.value.role) {
          return false
        }
        
        // 状态筛选
        if (userFilters.value.status && user.status !== userFilters.value.status) {
          return false
        }
        
        return true
      })
    })
    
    const filteredLogs = computed(() => {
      return logs.value.filter(log => {
        // 类型筛选
        if (logFilters.value.type && log.type !== logFilters.value.type) {
          return false
        }
        
        // 级别筛选
        if (logFilters.value.level && log.level !== logFilters.value.level) {
          return false
        }
        
        // 用户筛选
        if (logFilters.value.user && !log.user.includes(logFilters.value.user)) {
          return false
        }
        
        // 日期筛选
        if (logFilters.value.dateRange && logFilters.value.dateRange.length === 2) {
          const logDate = new Date(log.time.split(' ')[0])
          const startDate = new Date(logFilters.value.dateRange[0])
          const endDate = new Date(logFilters.value.dateRange[1])
          
          if (logDate < startDate || logDate > endDate) {
            return false
          }
        }
        
        return true
      })
    })
    
    // 方法
    const saveSchoolInfo = () => {
      // 保存学校信息的逻辑
      console.log('保存学校信息', schoolInfo.value)
      // 这里应该有API调用
      alert('学校信息保存成功')
    }
    
    const saveSystemParams = () => {
      // 保存系统参数的逻辑
      console.log('保存系统参数', systemParams.value)
      // 这里应该有API调用
      alert('系统参数保存成功')
    }
    
    const saveReminderRules = () => {
      // 保存提醒规则的逻辑
      console.log('保存提醒规则', reminderRules.value)
      // 这里应该有API调用
      alert('提醒规则保存成功')
    }
    
    const saveMessageTemplates = () => {
      // 保存消息模板的逻辑
      console.log('保存消息模板', messageTemplates.value)
      // 这里应该有API调用
      alert('消息模板保存成功')
    }
    
    const addRole = () => {
      // 添加角色的逻辑
      console.log('添加角色', newRole.value)
      
      // 验证
      if (!newRole.value.name) {
        alert('请输入角色名称')
        return
      }
      
      if (newRole.value.permissions.length === 0) {
        alert('请至少选择一个权限')
        return
      }
      
      // 模拟添加
      const roleId = roles.value.length + 1
      roles.value.push({
        id: roleId,
        name: newRole.value.name,
        description: newRole.value.description,
        userCount: 0,
        createdAt: new Date().toISOString().split('T')[0],
        permissions: newRole.value.permissions
      })
      
      // 重置表单
      newRole.value = {
        name: '',
        description: '',
        permissions: []
      }
      
      // 关闭弹窗
      showAddRoleDialog.value = false
    }
    
    const editRole = (role) => {
      // 编辑角色的逻辑
      console.log('编辑角色', role)
      // 这里应该打开编辑弹窗并填充数据
    }
    
    const deleteRole = (role) => {
      // 删除角色的逻辑
      if (confirm(`确定要删除角色「${role.name}」吗？`)) {
        console.log('删除角色', role)
        roles.value = roles.value.filter(r => r.id !== role.id)
      }
    }
    
    const addUser = () => {
      // 添加用户的逻辑
      console.log('添加用户', newUser.value)
      
      // 验证
      if (!newUser.value.username) {
        alert('请输入用户名')
        return
      }
      
      if (!newUser.value.password) {
        alert('请输入密码')
        return
      }
      
      if (newUser.value.password !== newUser.value.confirmPassword) {
        alert('两次输入的密码不一致')
        return
      }
      
      if (!newUser.value.roleId) {
        alert('请选择角色')
        return
      }
      
      // 获取角色名称
      const role = roles.value.find(r => r.id.toString() === newUser.value.roleId.toString())
      
      // 模拟添加
      const userId = users.value.length + 1
      users.value.push({
        id: userId,
        username: newUser.value.username,
        name: newUser.value.name,
        email: newUser.value.email,
        roleId: parseInt(newUser.value.roleId),
        roleName: role ? role.name : '',
        phone: newUser.value.phone,
        status: newUser.value.status,
        lastLogin: '-',
        avatar: `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${Math.floor(Math.random() * 10)}.jpg`
      })
      
      // 重置表单
      newUser.value = {
        username: '',
        name: '',
        email: '',
        password: '',
        confirmPassword: '',
        roleId: '',
        phone: '',
        status: 'active'
      }
      
      // 关闭弹窗
      showAddUserDialog.value = false
    }
    
    const editUser = (user) => {
      // 编辑用户的逻辑
      console.log('编辑用户', user)
      // 这里应该打开编辑弹窗并填充数据
    }
    
    const deleteUser = (user) => {
      // 删除用户的逻辑
      if (confirm(`确定要删除用户「${user.name}」吗？`)) {
        console.log('删除用户', user)
        users.value = users.value.filter(u => u.id !== user.id)
      }
    }
    
    const lockUser = (user) => {
      // 锁定用户的逻辑
      if (confirm(`确定要${user.status === 'locked' ? '解锁' : '锁定'}用户「${user.name}」吗？`)) {
        console.log(user.status === 'locked' ? '解锁用户' : '锁定用户', user)
        user.status = user.status === 'locked' ? 'active' : 'locked'
      }
    }
    
    const resetPassword = (user) => {
      // 重置密码的逻辑
      if (confirm(`确定要重置用户「${user.name}」的密码吗？`)) {
        console.log('重置密码', user)
        alert(`密码已重置为：123456`)
      }
    }
    
    const createBackup = () => {
      // 创建备份的逻辑
      console.log('创建备份')
      
      // 模拟添加
      const now = new Date()
      const formattedDate = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`
      const backupName = `backup_${formattedDate}.zip`
      
      backups.value.unshift({
        id: backups.value.length + 1,
        name: backupName,
        size: '155MB',
        createdAt: now.toLocaleString(),
        type: 'manual',
        status: 'completed'
      })
      
      alert('备份创建成功')
    }
    
    const restoreBackup = (backup) => {
      // 恢复备份的逻辑
      if (confirm(`确定要恢复备份「${backup.name}」吗？这将覆盖当前数据！`)) {
        console.log('恢复备份', backup)
        alert('备份恢复成功')
      }
    }
    
    const downloadBackup = (backup) => {
      // 下载备份的逻辑
      console.log('下载备份', backup)
      alert(`开始下载备份：${backup.name}`)
    }
    
    const deleteBackup = (backup) => {
      // 删除备份的逻辑
      if (confirm(`确定要删除备份「${backup.name}」吗？`)) {
        console.log('删除备份', backup)
        backups.value = backups.value.filter(b => b.id !== backup.id)
      }
    }
    
    const handleBackupFileChange = (event) => {
      // 处理备份文件选择的逻辑
      const file = event.target.files[0]
      if (file) {
        backupFileName.value = file.name
      }
    }
    
    const uploadAndRestore = () => {
      // 上传并恢复备份的逻辑
      if (confirm(`确定要上传并恢复备份「${backupFileName.value}」吗？这将覆盖当前数据！`)) {
        console.log('上传并恢复备份', backupFileName.value)
        alert('备份恢复成功')
        backupFileName.value = ''
      }
    }
    
    const saveBackupSettings = () => {
      // 保存备份设置的逻辑
      console.log('保存备份设置', {
        autoBackup: systemParams.value.autoBackup,
        backupTime: systemParams.value.backupTime,
        backupRetentionCount: systemParams.value.backupRetentionCount
      })
      alert('备份设置保存成功')
    }
    
    const viewLogDetail = (log) => {
      // 查看日志详情的逻辑
      selectedLog.value = log
      showLogDetailDialog.value = true
    }
    
    const exportLogs = () => {
      // 导出日志的逻辑
      console.log('导出日志', filteredLogs.value)
      alert('日志导出成功')
    }
    
    const clearLogs = () => {
      // 清空日志的逻辑
      if (confirm('确定要清空所有日志吗？此操作不可恢复！')) {
        console.log('清空日志')
        logs.value = []
      }
    }
    
    // 生命周期钩子
    onMounted(() => {
      // 初始化加载数据
      console.log('组件挂载完成')
    })
    
    return {
      // 状态
      activeTab,
      showAddRoleDialog,
      showAddUserDialog,
      showLogDetailDialog,
      
      // 数据
      schoolInfo,
      systemParams,
      reminderRules,
      messageTemplates,
      roles,
      newRole,
      permissionList,
      users,
      userFilters,
      newUser,
      backups,
      backupFileName,
      logFilters,
      logs,
      selectedLog,
      
      // 计算属性
      filteredUsers,
      filteredLogs,
      
      // 文本映射
      userStatusText,
      backupStatusText,
      logTypeText,
      logLevelText,
      
      // 方法
      saveSchoolInfo,
      saveSystemParams,
      saveReminderRules,
      saveMessageTemplates,
      addRole,
      editRole,
      deleteRole,
      addUser,
      editUser,
      deleteUser,
      lockUser,
      resetPassword,
      createBackup,
      restoreBackup,
      downloadBackup,
      deleteBackup,
      handleBackupFileChange,
      uploadAndRestore,
      saveBackupSettings,
      viewLogDetail,
      exportLogs,
      clearLogs
    }
  }
}
</script>

    <!-- 添加用户弹窗 -->
    <div v-if="showAddUserDialog" class="fixed inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" @click="showAddUserDialog = false"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                  添加用户
                </h3>
                <div class="mt-4 space-y-4">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                      <input 
                        type="text" 
                        v-model="newUser.username"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入用户名"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                      <input 
                        type="text" 
                        v-model="newUser.name"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入姓名"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                      <input 
                        type="password" 
                        v-model="newUser.password"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入密码"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                      <input 
                        type="password" 
                        v-model="newUser.confirmPassword"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请再次输入密码"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                      <input 
                        type="text" 
                        v-model="newUser.phone"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入手机号"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                      <input 
                        type="email" 
                        v-model="newUser.email"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入邮箱"
                      >
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">角色</label>
                      <select 
                        v-model="newUser.roleId"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="">请选择角色</option>
                        <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.name }}</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                      <select 
                        v-model="newUser.status"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="active">正常</option>
                        <option value="inactive">未激活</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button 
              @click="addUser"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              确认添加
            </button>
            <button 
              @click="showAddUserDialog = false"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 查看日志详情弹窗 -->
    <div v-if="showLogDetailDialog" class="fixed inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" @click="showLogDetailDialog = false"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                  日志详情
                </h3>
                <div class="mt-4 space-y-4">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">时间</label>
                      <div class="text-sm text-gray-900">{{ selectedLog.time }}</div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">类型</label>
                      <div class="text-sm text-gray-900">{{ logTypeText[selectedLog.type] }}</div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">级别</label>
                      <div class="text-sm text-gray-900">{{ logLevelText[selectedLog.level] }}</div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">用户</label>
                      <div class="text-sm text-gray-900">{{ selectedLog.user }}</div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">IP地址</label>
                      <div class="text-sm text-gray-900">{{ selectedLog.ip }}</div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">操作系统</label>
                      <div class="text-sm text-gray-900">{{ selectedLog.os }}</div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">浏览器</label>
                      <div class="text-sm text-gray-900">{{ selectedLog.browser }}</div>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700 mb-1">请求方法</label>
                      <div class="text-sm text-gray-900">{{ selectedLog.method }}</div>
                    </div>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">请求URL</label>
                    <div class="text-sm text-gray-900">{{ selectedLog.url }}</div>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">内容</label>
                    <div class="text-sm text-gray-900 whitespace-pre-wrap bg-gray-50 p-3 rounded-lg max-h-40 overflow-y-auto">{{ selectedLog.content }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button 
              @click="showLogDetailDialog = false"
              class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
            >
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>